<template>
  <div class="article-details">
    <van-nav-bar
      title="文章详情"
      left-arrow
      @click-left="$router.back()"
    />
    <van-cell-group :border="false">
      <van-cell center>
        <van-image
          class="avatar"
          slot="icon"
          round
          fit="cover"
          :src="articles.aut_photo"
        />
        <div slot="title" class="author-name">{{ articles.aut_name }}</div>
        <div slot="label" class="publish-date">{{ articles.pubdate | relativeTime }}</div>
        <van-button
          round
          size="small"
          @click="onfollowUser"
          :type="articles.is_followed ? 'default': 'danger'"
        >{{ articles.is_followed ? '已关注' : '关注' }}</van-button>
      </van-cell>
      <div class="title">{{ articles.title }}</div>
      <div
        class="markdown-body"
        v-html="articles.content"
        ref="article-content"
      ></div>
    </van-cell-group>
    <van-divider v-if="comments.length === 0">暂无任何评论</van-divider>
    <comment-list
      :articleId="this.articleId"
      @comments="comments = $event"
    ></comment-list>
    <div class="footer">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
        @click="writeShow = true"
      >写评论</van-button>
      <van-icon
        name="comment-o"
        :info="comments.length"
        color="#777"
      />
      <van-icon
        :color="articles.is_collected ? 'orange' : '#777' "
        name="star"
        @click="onCollectArticle"
      />
      <van-icon
        :color="articles.attitude === 1 ? 'orange' : '#777' "
        name="good-job"
        @click="onGoodArticle"
      />
      <van-icon name="share" color="#777777"></van-icon>
    </div>
    <van-popup
      v-model="writeShow"
      position="bottom"
    >
      <div class="comment-wrap">
        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入评论内容"
          show-word-limit
        />
        <a
          href="javaScript:;"
          class="publish-comment"
          @click="addComments"
          :style="message ? 'color: rgb(74, 142, 207)' : 'color: rgb(102, 102, 102)' "
        >发布</a>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { getArticles, followings, unfollowing, collectArticle, unCollectArticle, goodArticle, unGoodArticle } from '@/api/article'
import { addComments } from '@/api/comment'
import commentList from './components/comment-list'
import './github-markdown.css'
export default {
  name: 'articleIndex',
  data () {
    return {
      // 文章列表
      articles: [],
      // 评论列表
      comments: [],
      // 写评论弹出层状态
      writeShow: false,
      // 评论内容
      message: ''
    }
  },
  components: {
    commentList
  },
  props: {
    articleId: {
      type: [Number, String, Object],
      required: true
    }
  },
  methods: {
    // 获取用户信息
    async getArticles () {
      const res = await getArticles(this.articleId)
      this.articles = res.data.data
    },
    // 关注用户
    async onfollowUser () {
      this.articles.is_followed = !this.articles.is_followed
      if (this.articles.is_followed) {
        // 关注
        await followings(this.articles.aut_id)
      } else {
        // 取消关注
        await unfollowing(this.articles.aut_id)
      }
    },
    // 添加文章评论
    async addComments () {
      // 添加提示
      if (!this.message) {
        // 提示用户输入评论内容
        this.$toast({
          message: '请输入评论内容'
        })
      } else {
        // 提示发布中
        this.$toast.loading({
          message: '发布中...',
          forbidClick: true
        })

        // 调用接口, 添加评论
        const res = await addComments({
          target: this.articleId.toString(),
          content: this.message
        })
        this.comments.unshift(res.data.data.new_obj)
        // 清除文本框内容
        this.message = ''
        // 提示发布成功
        this.$toast.success({
          message: '发布成功',
          forbidClick: true
        })
        // 关闭弹出层
        this.writeShow = false
      }
    },
    // 收藏文章
    async onCollectArticle () {
      // 请求调用接口
      if (this.articles.is_collected) {
        // 已收藏, 取消收藏
        await unCollectArticle(this.articleId)
      } else {
        // 未收藏, 收藏
        await collectArticle(this.articleId)
      }
      // 视图更新
      this.articles.is_collected = !this.articles.is_collected
    },
    // 点赞
    async onGoodArticle () {
      if (this.articles.attitude === 1) {
        // 调用接口, 取消点赞
        await unGoodArticle(this.articleId)
        // 更新视图, 取消点赞
        this.articles.attitude = -1
      } else if (this.articles.attitude === -1) {
        // 调用接口, 确定点赞
        await goodArticle(this.articleId)
        // 更新视图, 确定点赞
        this.articles.attitude = 1
      }
    }
  },
  created () {
    this.getArticles()
  }
}
</script>
<style lang="less">
.article-details{
  padding-top: 46px;
  padding-bottom: 44px;
  background: #fff;
  .van-nav-bar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    .van-nav-bar__title{
      font-size: 14px;
    }
  }
  .van-cell{
    .avatar{
      width: 36px;
      height: 36px;
      margin-right: 10px;
    }
  }
  .title{
    padding: 10px 16px;
    font-size: 20px;
    font-weight: bold;
  }
  .markdown-body{
    padding: 10px 16px;
  }
  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    height: 44px;
    border-top: 1px solid #d8d8d8;
    background-color: #fff;
    .comment-btn {
      width: 141px;
      height: 23px;
      border: 1px solid #eeeeee;
      font-size: 15px;
      line-height: 23px;
      color: #a7a7a7;
    }
    .van-icon {
      font-size: 20px;
      .van-info {
        font-size: 11px;
        background-color: #e22829;
      }
    }
  }
}
.van-popup--bottom{
  .comment-wrap{
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .van-cell{
      background-color: #f5f7f9
    }
    .publish-comment{
      width: 80px;
      font-size: 15px;
      text-align: center;
    }
  }
}
</style>
